<script setup lang="ts">
import { ref, watch, computed, onMounted, onUnmounted } from 'vue'
import { getColWidth, setLastWidth } from '@/utils/FormatData'
const props = defineProps(['data', 'cols'])
const list = ref<any[]>([])
const colNum = ref(0)
watch(
  () => props.data,
  (val) => {
    list.value = val
    const len = list.value.length
    if (len) {
      stopAutoPlay()
      currentPage.value = 0
      len > 5 &&
        setTimeout(() => {
          startAutoPlay()
        }, 0)
    }
  }
)

const boxRef = ref()
const column = ref()
watch(
  () => props.cols,
  (val) => {
    colNum.value = val.length
    const boxWidth = boxRef.value?.offsetWidth
    if (props.cols.length) {
      column.value = getColWidth(props.cols, boxWidth)
      setLastWidth(column.value, boxWidth)
    }
  }
)

// 每页显示的条目数量
const pageSize = 5
const currentPage = ref(0)

// 数据分页
const paginatedData = computed(() => {
  const pages: Array<typeof list.value> = []
  for (let i = 0; i < list.value.length; i += pageSize) {
    pages.push(list.value.slice(i, i + pageSize))
  }
  return pages
})
// 当前页的数据
const currentPageData = computed(() => {
  return paginatedData.value[currentPage.value] || []
})

// 自动轮播
let interval: NodeJS.Timeout | null = null

const startAutoPlay = () => {
  interval = setInterval(() => {
    nextPage()
  }, 5000) // 每5秒切换一次
}

const stopAutoPlay = () => {
  if (interval) {
    clearInterval(interval)
    interval = null
  }
}

// 切换到下一页
const nextPage = () => {
  currentPage.value = (currentPage.value + 1) % paginatedData.value.length
}

// 切换到上一页
const prevPage = () => {
  currentPage.value =
    (currentPage.value - 1 + paginatedData.value.length) % paginatedData.value.length
}

const mouseenter = () => {
  list.value.length > 10 && stopAutoPlay()
}

const mouseleave = () => {
  list.value.length > 10 && startAutoPlay()
}

// 生命周期钩子
// onMounted(() => {
//   list.value.length && startAutoPlay()
// })
onUnmounted(stopAutoPlay)
</script>
<template>
  <div ref="boxRef" class="scroll-box row-box-content table-box" style="width: 100%">
    <div class="table-head-box">
      <p v-for="(item, index) in column" :key="index" :style="{ width: item.width + 'px' }">
        {{ item.label }}
      </p>
    </div>
    <div v-if="currentPageData.length" class="carousel-container">
      <!-- 当前分页内容 -->
      <div class="carousel-page">
        <div v-for="item in currentPageData" :key="item.id" class="carousel-item">
          <template v-for="(colItem, colIndex) in column" :key="colIndex">
            <template v-for="(keyItem, keyIndex) in Object.keys(item)" :key="keyIndex">
              <template v-if="keyItem == colItem.value">
                <div :style="{ width: colItem.width + 'px' }" class="flex items-center justify-center">
                  <span
                    v-if="colItem.value == 'Status'"
                    :title="item[colItem.value]"
                    :class="item[colItem.value] == '已完成' ? 'completed' : 'pending'"
                    >{{ item[colItem.value] }}</span
                  >
                  <span v-else :title="item[colItem.value]" :style="{ width: colItem.width + 'px' }">{{
                    item[colItem.value]
                  }}</span>
                </div>
              </template>
            </template>
          </template>
        </div>
      </div>
      <!-- 控制按钮 -->
      <div class="carousel-controls">
        <button @click="prevPage">上一页</button>
        <button @click="nextPage">下一页</button>
      </div>
    </div>
    <div v-else class="flex justify-center my-empty-data"><p>暂无数据</p></div>
  </div>
</template>
<style lang="less" scoped>
.my-empty-data {
  height: 240px;
  line-height: 240px;
}
.carousel-container {
  width: 100%;
  height: 250px;
  overflow: hidden;
}

.carousel-page {
  display: flex;
  flex-direction: column;
}

.carousel-item {
  display: flex;
  height: 50px;
  font-size: 20px;
  color: #8fe1ff;
  text-align: center;
  &:nth-child(even) {
    background: rgba(31, 37, 91);
    color: #8fe1ff;
  }
  &:nth-child(odd) {
    background: rgba(6, 13, 73);
    color: #e2e8f0;
  }
  &:hover {
    background: #182758;
  }
  span{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.carousel-controls {
  display: none;
  margin-top: 16px;
}

.completed {
  display: block;
  padding: 2px 10px;
  color: #00f2f1;
  border-radius: 20px;
  border: 1px solid #00f2f1;
  font-size: 18px;
}
.pending {
  display: block;
  padding: 2px 10px;
  color: #fdad54;
  border-radius: 20px;
  border: 1px solid #fdad54;
  font-size: 18px;
}
</style>
